<template>
  <div id="roll" ref="roll" :roll="roll" :style="divStyle">
    <div class="roll">
      <div class="notice-icon">
        <span
          v-if="options.iconSettings.split('|')[0] == '1'"
          :class="options.iconSettings.split('|')[1]"
          :style="{ color: options.iconColor }"
        ></span>
        <img v-else :src="options.iconSettings.split('|')[1]" />
      </div>
      <div
        :id="swiperId"
        ref="swiper"
        :class="[
          'swiper-container',
          'notice-box',
          [roll === 'one' ? 'column-container' : 'row-container']
        ]"
      >
        <div class="swiper-wrapper">
          <div v-for="(item, index) in showNotice" :key="index" class="swiper-slide notice-item">
            <a :href="item.link" target="_blank" ref="spanItem" class="section">{{
              item.subject
            }}</a>
            <!-- <span ref="spanItem" class="title">{{ item.title }}</span> -->
          </div>
        </div>
      </div>
      <div class="more">
        <a :href="notices.moreButton.link" :target="notices.moreButton.target"
          >更多&gt;<span :class="notices.moreButton.icon"></span
        ></a>
      </div>
    </div>
    <div v-show="roll === 'two'" class="side side-left"></div>
    <div v-show="roll === 'two'" class="side side-right"></div>
  </div>
</template>

<script>
  import swiper from '@/mixins/swiper';
  export default {
    name: 'RollOne',
    mixins: [swiper],
    props: {
      roll: {
        type: String,
        default: 'one'
      },
      notices: { type: Object },
      options: { type: Object }
    },
    data() {
      return {
        showNotice: [],
        swiperId: `swiper${this._uid}`
      };
    },
    computed: {
      divStyle() {
        return {
          'background-color': this.options.scrollBGColor,
          color: this.options.txtColor
        };
      }
    },
    mounted() {
      this.showNotice = this.notices.rows.slice(0, +this.options.count);
      this.$nextTick(() => {
        // console.log("two");
        this.setSwiper(
          new Swiper(`#${this.swiperId}`, {
            loop: true,
            autoplay: 2000,
            speed: 300,
            mode: this.roll === 'two' ? 'horizontal' : 'vertical'
            // 其他设置,
          })
        );
      });
    }
  };
</script>

<style lang="scss" scoped>
  * {
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
  }

  #roll {
    position: relative;
    width: 100%;
    height: 50px;
    background-color: #ffe6e6;
  }

  .swiper-container {
    position: absolute;
    left: 60px;
    width: 70%;
    height: 100%;
  }

  .notice-item {
    display: block !important;
    width: 100%;
    height: 100%;

    span,
    .section {
      display: inline-block;
      width: 49%;
      height: inherit;
      line-height: 50px;
      text-align: center;
    }
  }

  .roll {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0 10px;
    // overflow: hidden;
    .notice-icon {
      float: left;
      width: 40px;
      height: 30px;
      padding-right: 10px;
      margin-top: 10px;
      text-align: center;
      border-right: 1px solid #ccc;

      > span {
        font-size: 25px;
        line-height: 30px;
      }
    }

    .more {
      float: right;
      font-size: 14px;
      line-height: 50px;
      // color: #999;
    }
  }

  .side {
    position: absolute;
    top: 5px;
    bottom: 5px;
    z-index: 2;
    width: 5px;
    background: rgba(0, 0, 0, 0.2);
  }

  .side-left {
    left: -5px;
  }

  .side-left::before {
    position: absolute;
    bottom: -5px;
    z-index: 2;
    width: 0;
    height: 0;
    border-top: 5px solid rgba(0, 0, 0, 0.2);
    border-left: 5px solid transparent;
    content: '';
  }

  .side-left::after {
    position: absolute;
    top: -5px;
    z-index: 2;
    width: 0;
    height: 0;
    border-bottom: 5px solid rgba(0, 0, 0, 0.2);
    border-left: 5px solid transparent;
    content: '';
  }

  .side-right {
    right: -5px;
  }

  .side-right::before {
    position: absolute;
    top: -5px;
    z-index: 2;
    width: 0;
    height: 0;
    border-right: 5px solid transparent;
    border-bottom: 5px solid rgba(0, 0, 0, 0.2);
    content: '';
  }

  .side-right::after {
    position: absolute;
    bottom: -5px;
    z-index: 2;
    width: 0;
    height: 0;
    border-top: 5px solid rgba(0, 0, 0, 0.2);
    border-right: 5px solid transparent;
    content: '';
  }
</style>
